<template>
	<view class="container">
		<u-navbar back-icon-color="#36363A" :border-bottom="false" title-size="34" title-color="#36363A" title="在线客服"
			placeholder :background="bgColor" :custom-back="goBack">
			<view class="d-flex justify-content-right" slot="right">
				<view class="setting-icon" @tap="refreshMsg">
					<image src="/static/mine/refresh-img.png"  :class="{'run':show}"></image>
				</view>
			</view>
			</u-navbar>
		<view>
			<view class="content">
				<scroll-view class="msg-list mesScroll-Y" scroll-y="true" :scroll-with-animation="scrollAnimation"
					:scroll-top="scrollTop" :scroll-into-view="scrollToView" @scrolltoupper="loadHistory" @scroll="scroll"
					upper-threshold="50" :style="{'--percent':top + 'px','--percenTop':posTop+'px'}">
					<!-- 加载历史数据waitingUI -->
					<view class="loading" v-show="isHistoryLoading && total > msgList.length">
						<view class="spinner">
							<view class="rect1"></view>
							<view class="rect2"></view>
							<view class="rect3"></view>
							<view class="rect4"></view>
							<view class="rect5"></view>
						</view>
					</view>
					<view class="row" v-for="(row,index) in msgList" :key="index" :id="'msg'+row.id">
						<!-- 用户消息 -->
						<block>
							<!-- 自己发出的消息 -->
							<view class="my align-items-center" v-if="!row.admin">
								<view  class="bubble-content position-relative flyin-style-my">
									<rich-text :nodes="row.content" class="text-ffffff fz-30"></rich-text>
								</view>
								<view class="right position-relative vip-style">
									<image class="crown-icon-my position-absolute" :src="USER.avatar" mode="aspectFill" v-if="USER.avatar"></image>
									<image class="crown-icon-my position-absolute" :src="$avatar" mode="aspectFill" v-else></image>
								</view>
							</view>
							<!-- 别人发出的消息 -->
							<view class="other align-items-center" v-else>
								<view class="left position-relative other-vip-style">
									<image class="crown-icon-other position-absolute" src="/static/mine/service-img.png" mode="aspectFill"></image>
								</view>
								<view class="bubble-content position-relative flyin-style-other">
									<rich-text :nodes="row.content" class="text-36363A fz-30"></rich-text>
								</view>
							</view>
						</block>
					</view>
				</scroll-view>
			</view>
			<!-- 底部输入栏 -->
			<view class="input-box bottom-input" @touchmove.stop.prevent="discard">
				<view class="d-flex justify-content-between align-items-center w-100">
					<view class="textbox mt-0">
						<view class="text-mode">
							<view class="box">
								<textarea auto-height="true" placeholder="请输入..."
									placeholder-style="color:#CCCDD1;font-size:30upx" v-model="textMsg" />
							</view>
						</view>
					</view>
					<view class="more more-margin" @tap="sendText">
						<image src="/static/home/send-msg.png"></image>
					</view>
				</view>
			</view>
		</view>
		<u-top-tips ref="uTips1" :navbar-height="statusBarHeight + navbarHeight"></u-top-tips>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgColor: { background: '#f5f5f5' },
				scrollTop: 0,
				scrollToView: '',
				old: {
					scrollTop: 0
				},
				textMsg: '',
				isHistoryLoading: false,
				scrollAnimation: false,
				msgList: [],
				total:'',
				page:1,
				top: '',
				posTop: '',
				text: "",
				getMsgTime:null,
				show:false,
				timeCount:2,//发送消息2秒倒计时，防止刷屏
				// 状态栏高度，H5中，此值为0，因为H5不可操作状态栏
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				// 导航栏内容区域高度，不包括状态栏高度在内
				navbarHeight: 44
			}
		},
		onLoad(option) {
			this.getMsgList();
			this.top = this.tui.navBarHeight + 44 + 60
			this.posTop = this.tui.navBarHeight + 44
			this.getMsgTime = setInterval(()=>{
				this.page = 1
				this.total = ''
				this.getMsgList(1)
			},60000)
		},
		onUnload() {
			clearInterval(this.getMsgTime)
		},
		computed:{
			USER(){
				return this.$store.state.auth.USER
			}
		},
		methods: {
			goBack(){
				uni.switchTab({
					url:'/pages/tabBars/mine'
				})
			},
			refreshMsg(){
				if(!this.show){
					this.show = true
					setTimeout(()=>{
						this.show = false
					},2000)
					this.getMsgList(1,'refresh')
				}
			},
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			// 获取消息
			getMsgList(val,text) {
				this.$store.dispatch('public/messages',{page:1}).then(res=>{
					setTimeout(()=>{
						if(text == 'refresh'){
							this.$refs.uTips1.show({
								title: '刷新消息成功~',
								type: 'primary',
								duration: '2000'
							})
						}
					},500)
					this.total = res.data.total
					if(this.msgList.length < 15){
						this.msgList = res.data.data.reverse()
					}else{
						if(val == 1){
							//val==1 刷新最新列表并且page=1
							this.msgList = res.data.data.reverse()
						}else{
							this.msgList.splice(this.msgList.length - 14,14,...res.data.data.reverse())
						}
					}
					// 滚动到底部
					this.scrollTop = this.old.scrollTop
					this.$nextTick(()=> {
						//进入页面滚动到底部
						this.scrollTop = 9999999;
						this.$nextTick(()=> {
							this.scrollAnimation = true;
						});
					});
				})
			},
			// 发送文字消息
			sendText() {
				if (this.$u.trim(this.textMsg, 'all') === '') {
					this.textMsg = ''
					return uni.$u.toast('请输入需要发送的内容');
				}
				let time = setInterval(() => {
					this.timeCount--
					if (this.timeCount == 0) {
						this.timeCount = 2
						clearInterval(time)
					}
				}, 1000)
				if (this.timeCount < 2) {
					return this.tui.toast('发送消息太频繁了！')
				}
				this.$store.dispatch('public/messagesSend',{content:this.textMsg}).then(res=>{
					this.textMsg = ''
					this.getMsgList()
				})
			},
			discard() {
				return;
			},
			//触发滑动到顶部(加载历史信息记录)
			loadHistory(e) {
				if (this.isHistoryLoading) {
					return;
				}
				this.isHistoryLoading = true; //参数作为进入请求标识，防止重复请求
				this.scrollAnimation = false; //关闭滑动动画
				let Viewid = this.msgList[0].id; //记住第一个信息ID
				//本地模拟请求历史记录效果
				if(this.total > this.msgList.length){
					this.page ++
					setTimeout(()=>{
						this.$store.dispatch('public/messages',{page:this.page}).then(res=>{
							this.total = res.data.total
							this.msgList = [...res.data.data.reverse(),...this.msgList]
							//这段代码很重要，不然每次加载历史数据都会跳到顶部
							this.$nextTick(function() {
								this.scrollToView = 'msg' + Viewid; //跳转上次的第一行信息位置
								this.$nextTick(function() {
									this.scrollAnimation = true; //恢复滚动动画
								});
							});
							this.isHistoryLoading = false;
						})
					},1000)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/HM.scss";
	.container {
		width: 100%;
		min-height: 100vh;
		background: #f5f5f5;
		background-repeat: no-repeat;
		overflow: hidden;
	}
	.setting-icon {
		height: 40upx;
		padding-right: 30upx;
		
		image {
			width: 44upx;
			height: 44upx;
			vertical-align: top;
		}
	}
	.run{
		transform: rotate(360deg);
		transition: 2s;
	}
	.mesScroll-Y {
		height: calc(100vh - var(--percent)) !important;
		top: var(--percenTop) !important;
		box-sizing: border-box;
		padding-top: 20upx !important;
	}

	.bottom-input {
		min-height: 120upx !important;
		padding-top: 0 !important;
		padding-bottom: var(--window-bottom) !important;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.bubble-content{
		display: inline-block;
		border-radius: 8upx 24upx 24upx 24upx;
		padding: 20upx 20upx;
		text-align: justify;
		font-size: 32upx;
		background-color: #FFFFFF;
		max-width: 480upx;
		word-break:break-all;
	}
	.flyin-style-my{
		padding-left: 28upx !important;
		background: #608dff;
		border-radius: 24upx 8upx 24upx 24upx;
	}
	.flyin-style-other{
		padding-right: 28upx !important;
		
	}

	.vip-style{
		margin-right: 12upx !important;
		margin-left: 24upx !important;
	}
	.vip-icon{
		width: 80upx !important;
		height: 80upx !important;
	}
	.crown-icon-my{
		width: 110upx !important;
		height: 110upx !important;
		top:-20upx;
		left:-16upx;
		border-radius: 50% !important;
	}
	.crown-icon-other{
		width: 110upx !important;
		height: 110upx !important;
		top:-20upx;
		left:-12upx;
		border-radius: 50% !important;
	}	
	.other-vip-style{
		margin-right: 24upx !important;
		margin-left: 12upx !important;
	}
	/deep/ .u-primary{
		background: #608dff !important;
	}
</style>
